<template>
  <div class="wrapper">
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleCancel" center top="18vh" width="600px">
      <el-descriptions :column="2" class="left">
        <el-descriptions-item label="设备编号">{{ model.sourceId || '--'}}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ model.eqptName || '--'}}</el-descriptions-item>
        <el-descriptions-item label="楼宇">{{ model.buildName || '--'}}</el-descriptions-item>
        <el-descriptions-item label="设备类型一级">{{ model.firstLevelName || '--'}}</el-descriptions-item>
        <el-descriptions-item label="楼层">{{ model.floorName || '--'}}</el-descriptions-item>
        <el-descriptions-item label="设备类型二级">{{ model.secondLevelName || '--'}}</el-descriptions-item>
        <el-descriptions-item label="区域/房间">{{ model.areaName || '--'}}</el-descriptions-item>
        <el-descriptions-item label="供应商名称">{{ model.supplierName || '--'}}</el-descriptions-item>
        <el-descriptions-item label="设备标签">
          <ul v-for="(item, index) in model.labelTreeName" :key="index" class="ellipsis">
            <el-tooltip effect="dark" :content="item" placement="bottom">
              <span>{{ item }}</span>
            </el-tooltip>
          </ul>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'readMaintain',
  components: {},
  data () {
    return {
      title: '查看详情',
      dialogVisible: false,
      model: {}
    }
  },
  computed: {},
  methods: {
    add (row) {
      console.log(row)
      this.model = { ...row }
      this.dialogVisible = true
    },
    handleCancel () {
      this.model = {}
      this.dialogVisible = false
    }
  },
  mounted () {}
}
</script>
<style lang="scss" scoped>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
</style>
